<template>
  <div class="layout">
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo">
          <el-menu-item index="1">
            <span>全部项目</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span>管理的项目</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span>参加的项目</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-content">
            <el-input
              v-model="searchQuery"
              class="search-input"
              clearable
              placeholder="项目名称"
            >
            </el-input>

            <el-select v-model="selectType" clearable placeholder="项目状态">
              <el-option
                v-for="dict in dict.type.project_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button class="create-project-btn" type="primary" @click="dialogFormVisible = true">新建项目</el-button>
          </div>
        </el-header>
        <el-main style="display: flex; flex-direction: column; height: 100%;">
          <el-table :data="projects" style="width: 100%; flex: 1;">
            <el-table-column label="项目编号" min-width="180" prop="projectId"></el-table-column>
            <el-table-column label="项目名称" min-width="180" prop="name"></el-table-column>
            <el-table-column label="项目开始日期" min-width="180" prop="startDate" type="date"
                             value-format="yyyy-MM-dd">
              <template v-slot="scope">
                {{ formatDateDay(scope.row.startDate) }}
              </template>
            </el-table-column>
            <el-table-column v-slot="scope" label="项目状态" min-width="180">
              <dict-tag :options="dict.type.project_status" :value="scope.row.status"/>
            </el-table-column>
            <el-table-column label="更新时间" min-width="180" prop="updatedAt" type="date"
                             value-format="yyyy-MM-dd">
              <template v-slot="scope">
                {{ formatDateDay(scope.row.updatedAt) }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template v-slot="scope">
                <el-button size="small" type="text" @click="goInit(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog label-position="right" :visible.sync="dialogFormVisible" title="新增项目" label-width="80px">
      <el-form ref="form" :model="addProject" label-width="100px">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="addProject.name" placeholder="请输入项目名称"/>
        </el-form-item>
        <el-form-item label="项目开始日期" prop="startDate">
          <el-date-picker v-model="addProject.startDate"
                          clearable
                          placeholder="请选择项目开始日期"
                          type="date"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目结束日期" prop="endDate">
          <el-date-picker v-model="addProject.endDate"
                          clearable
                          placeholder="请选择项目结束日期"
                          type="date"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目状态" prop="status">
          <el-select v-model="addProject.status" placeholder="请选择项目状态">
            <el-option
              v-for="dict in dict.type.project_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目预算" prop="budget">
          <el-input v-model="addProject.budget" placeholder="请输入项目预算"/>
        </el-form-item>
        <el-form-item label="项目优先级" prop="priority">
          <el-select v-model="addProject.priority" placeholder="请选择项目优先级">
            <el-option
              v-for="dict in dict.type.priority"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createProject, listProject} from "@/api/projectUser/userProjects.js";
import {formatDateDay} from "@/utils/ruoyi";

export default {
  dicts: ['project_status', 'priority'],
  data() {
    return {
      selectType: '',
      activeIndex: '1',
      searchQuery: '',
      projects: [],
      dialogFormVisible: false,
      addProject: {},
      projectStatusType: null,
    };
  },
  computed: {},
  beforeCreate() {

  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      listProject().then(({rows}) => {
        this.projects = rows;
      })
    },
    saveProject() {
      this.dialogFormVisible = false
      createProject(this.addProject).then(() => {
        this.$message.success('创建成功')
        this.getData()
      })
    },
    formatDateDay,
    goInit({projectId}) {
      this.$router.push({name: 'projectInit', query: {projectId: projectId}});
    },
    search() {
      console.log('搜索:', this.searchQuery);
    },
  }
}
</script>

<style lang="scss" scoped>
.layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.search-input {
  width: 300px;
}

.create-project-btn {
  margin-left: 20px;
}

.el-aside {
  height: 100%;
}

.el-menu {
  height: 100%;
  border-right: none;
}

.el-menu-item {
  text-align: left;
}

.el-main {
  display: flex;
  flex-direction: column;
  flex: 1; /* 使主内容区域占据剩余空间 */
  padding: 0; /* 去除内边距 */
}

.el-table {
  margin-top: 20px; /* 可根据需要调整 */
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
